<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    需求：获取三页数据
    <div id="box"></div>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(function () {
            //获取数据
            function getJson(page) {
                var p = new Promise((resolve, reject) => {
                    $.get("./json/0" + page + ".json", "", function (data) {
                        resolve(data);
                    })
                })
                return p;
            }
            //渲染 
            function writeHTML(data) {
                var str = "";
                data.forEach(item => {
                    var oP = $(`<p>${item.collection_num} - ${item.pro_title}</p>`);
                    $('#box').append(oP);
                })
            }

            //使用promise解决地狱回调并渲染,性能更好
            Promise.all([getJson(1), getJson(2), getJson(3)]).then(res => {
                console.log(res);
                //重组数据
                var data = [...res[0].matchedProducts, ...res[1].matchedProducts, ...res[2].matchedProducts];
                //渲染
                writeHTML(data);
            }, err => {
                console.log(err);
            });
        })
        //获取异步数据时，因为返回数据的时间不确定，将导致数据的顺序性发生错乱
        //为了保持数据的顺序性，将后一页的数据获取写在前一页的数据获取的回调函数中，这种形式叫做回调地狱
        // 怎样解决回调地狱问题呢？

    </script>
</body>

</html>